<template>
  <div class="search">
    <!-- 搜索头部 -->
    <div class="search-header">
      <div class="search-box">
        <!-- <div class="keyWord" v-show="cover">
          <div
            class="title"
            @click="Fnsearch(item)"
            v-for="item in AroundList"
            :key="item.id"
          >
            {{ item.tit_con }}
          </div>
        </div> -->
        <div class="search-left">
          <img
            src="../../assets/images/home/search.jpg"
            alt=""
            class="magnifier"
          />
          <input type="text" placeholder="布加迪威龙" ref="search" />
          <img
            src="../../assets/images/home/search_clear.jpg"
            alt=""
            class="clear"
          />
        </div>
        <div class="search-right">
          <div class="words" @click="FnBack">取消</div>
        </div>
      </div>
    </div>
    <!-- 中间部分main -->
    <!-- 背景颜色 -->
    <div class="main">
      <div class="backdrop">
        <!-- 历史搜索 -->
        <div class="history">
          <div class="history-top">
            <div class="history-left">
              <img
                src="../../assets/images/home/search_time.jpg"
                alt=""
                class="time"
              />
              <div class="historical-search">历史搜索</div>
            </div>
            <div class="history-right">
              <div class="empty">清空</div>
            </div>
          </div>
          <div class="history-list">
            <div class="history-ul">
              <div></div>
            </div>
          </div>
        </div>
        <!-- 品牌车系 -->
        <div class="more">
          <div class="history-top">
            <div class="history-left">
              <img
                src="../../assets/images/home/search_stars.jpg"
                alt=""
                class="time"
              />
              <div class="historical-search">品牌车系</div>
            </div>
            <div class="history-right">
              <div class="empty">
                更多
                <img
                  src="../../assets/images/home/search_arrow.jpg"
                  alt=""
                  class="arrow"
                />
              </div>
            </div>
          </div>
          <div class="history-list">
            <div class="history-ul">
              <div
                class="history-item"
                v-for="item in brandList"
                :key="item.id"
                @click="MordAdd(item.text, index)"
              >
                {{ item.text }}
              </div>
            </div>
          </div>
        </div>
        <!-- 车身类型 -->
        <div class="brand">
          <div class="history-top">
            <div class="history-left">
              <img
                src="../../assets/images/home/search_car.jpg"
                alt=""
                class="time"
              />
              <div class="historical-search">车身类型</div>
            </div>
          </div>
          <div class="history-list">
            <div class="history-ul">
              <div
                class="history-item"
                v-for="item in typeList"
                :key="item.id"
                @click="BrandAdd(item.text, index)"
              >
                {{ item.text }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      brandList: [
        { id: "two1", text: "奥迪 A6L" },
        { id: "two2", text: "宝马 5系" },
        { id: "two3", text: "奥迪 A4L" },
        { id: "two4", text: "本田 雅阁" },
        { id: "two5", text: "丰田 凯美瑞" },
        { id: "two6", text: "宝马 3系" },
        { id: "two7", text: "大众 迈腾" },
        { id: "two8", text: "奔驰 C级" },
      ],
      typeList: [
        { id: "thre1", text: "三厢轿车" },
        { id: "thre2", text: "两厢轿车" },
        { id: "thre3", text: "SUV" },
        { id: "thre4", text: "MPV" },
        { id: "thre5", text: "跑车" },
        { id: "thre6", text: "旅游车" },
        { id: "thre7", text: "面包车" },
        { id: "thre8", text: "其他车身类型" },
      ],
    };
  },
  methods: {
    FnBack() {
      this.$router.back("./home");
    },
  },
};
</script>
<style lang="less" scoped>
body,
html {
  margin: 0;
  height: 100vh;
}

/* 去掉a的下划线 */
a {
  text-decoration: none;
}

/* 搜索框去除边框 */
input {
  border: 0;
  /* 设置背景颜色为透明 */
  background-color: transparent;
  /* 去掉外轮廓 */
  outline: none;
}

/* 图片的空白间隙 */
img {
  vertical-align: middle;
}

body {
  background-color: #ffffff;
  font: 14px/22px "微软雅黑";
  color: #0c0d0f;
}

.search {
  width: 750px;
  overflow: hidden;
  //头部
  .search-header {
    position: relative;
    width: 750px;
    height: 91px;
    background: #ffffff;
    //关键词
    .keyWord {
      top: 91px;
      left: 0;
      position: absolute;
      width: 750px;
      height: 100vh;
      background: #fff;
      .title {
        width: 750px;
        height: 118px;
        border-top: 2px solid #ededed;
        font-size: 30px;
        color: #272727;
        line-height: 118px;
        padding-left: 63px;
      }
    }
    .search-box {
      width: 750px;
      height: 91px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 30px 0 28px;
      box-sizing: border-box;
      .search-left {
        width: 616px;
        height: 57px;
        background: #f6f6f6;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 16px 0 26px;
        .magnifier {
          width: 28px;
          height: 28px;
        }
        .clear {
          width: 22px;
          height: 22px;
        }
        input {
          flex: 1;
          height: 57px;
          line-height: 57px;
          padding-left: 28px;
          margin-top: 10px;
          &::placeholder {
            font-size: 22px;
            color: #0f0f0f;
          }
        }
      }
      .search-right {
        .words {
          font-size: 27px;
          color: #3a3a3a;
        }
      }
    }
  }
  //   中间内容

  .main {
    width: 750px;
    display: flex;
    align-items: center;
    .backdrop {
      width: 750px;
      height: 90vh;
      background: #ebe9ea;
      .history {
        width: 710px;
        height: 235px;
        background: #ffffff;
        box-shadow: 0px 2px 2px #ccc;
        border-radius: 10px;
        margin: 20px;
        .history-top {
          width: 710px;
          height: 70px;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 24px 0 22px;
          box-sizing: border-box;
          border-bottom: 1px solid #f0f0f0;
          .history-left {
            display: flex;
            .time {
              width: 33px;
              height: 33px;
            }
            .historical-search {
              font-size: 23px;
              color: #959595;
              margin-left: 17px;
            }
          }
          .history-right {
            .empty {
              font-size: 23px;
              color: #878787;
            }
          }
        }
        .history-list {
          width: 710px;
          height: 165px;
          background: #fff;
          .history-ul {
            width: 710px;
            height: 165px;
            display: flex;
            flex-wrap: wrap;
            .history-item {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 20px;
              border-right: solid 1px #f0f0f0;
              border-bottom: solid 1px #f0f0f0;
              width: 132px;
              height: 36px;
              text-align: center;
              font-size: 23px;
              color: #000000;
            }
          }
        }
      }
      // 品牌
      .more {
        width: 710px;
        height: 235px;
        background: #ffffff;
        box-shadow: 0px 2px 2px #ccc;
        border-radius: 10px;
        margin: 20px;
        .history-top {
          width: 710px;
          height: 70px;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 24px 0 22px;
          box-sizing: border-box;
          border-bottom: 1px solid #f0f0f0;
          .history-left {
            display: flex;
            .time {
              width: 33px;
              height: 33px;
            }
            .historical-search {
              font-size: 23px;
              color: #959595;
              margin-left: 17px;
            }
          }
          .history-right {
            .empty {
              font-size: 24px;
              color: #898989;
              .arrow {
                width: 12px;
                height: 21px;
                margin-left: 12px;
              }
            }
          }
        }
        .history-list {
          width: 710px;
          height: 165px;
          background: #fff;
          .history-ul {
            width: 710px;
            height: 165px;
            display: flex;
            flex-wrap: wrap;
            .history-item {
              // width: 179px;
              // height: 83px;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 20px;
              border-right: solid 1px #f0f0f0;
              border-bottom: solid 1px #f0f0f0;
              width: 132px;
              height: 36px;
              text-align: center;
              font-size: 23px;
              color: #000000;
            }
          }
        }
      }
      // 车系
      .brand {
        width: 710px;
        height: 235px;
        background: #ffffff;
        box-shadow: 0px 2px 2px #ccc;
        border-radius: 10px;
        margin: 20px;
        .history-top {
          width: 710px;
          height: 70px;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 24px 0 22px;
          box-sizing: border-box;
          border-bottom: 1px solid #f0f0f0;
          .history-left {
            display: flex;
            .time {
              width: 33px;
              height: 33px;
            }
            .historical-search {
              font-size: 23px;
              color: #959595;
              margin-left: 17px;
            }
          }
          .history-right {
            .empty {
              font-size: 24px;
              color: #898989;
              .arrow {
                width: 12px;
                height: 21px;
                margin-left: 12px;
              }
            }
          }
        }
        .history-list {
          width: 710px;
          height: 165px;
          background: #fff;
          .history-ul {
            width: 710px;
            height: 165px;
            display: flex;
            flex-wrap: wrap;
            .history-item {
              // width: 179px;
              // height: 83px;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 20px;
              border-right: solid 1px #f0f0f0;
              border-bottom: solid 1px #f0f0f0;
              width: 132px;
              height: 36px;
              text-align: center;
              font-size: 21px;
              color: #000000;
            }
          }
        }
      }
    }
  }
}
</style>